<template>
    <a-tree-select
      v-model="selectedValue"
      :tree-data="treeData"
      :tree-checkable="mode === 'multiple'"
      :check-strictly="true"
      :show-checked-strategy="SHOW_CHILD"
      :disabled="!node.isLeaf"
      :placeholder="placeholder"
      :style="{ width }"
      @change="handleChange"
    />
  </template>
  
  <script>
  import { defineComponent, toRefs, computed, ref, watch } from 'vue';
  
  export default defineComponent({
    name: 'TreeSelect',
    props: {
      // 单选/多选模式
      mode: {
        type: String,
        default: 'single',
        validator: (value) => ['single', 'multiple'].includes(value)
      },
      // 当前选中值
      value: {
        type: [String, Array],
        default: null
      },
      // 树数据
      treeData: {
        type: Array,
        required: true
      },
      // 占位文本
      placeholder: {
        type: String,
        default: '请选择'
      },
      // 组件宽度
      width: {
        type: [String, Number],
        default: '100%'
      }
    },
    emits: ['change'],
    setup(props, { emit }) {
      const { mode, value } = toRefs(props);
      
      // 内部选中值
      const selectedValue = ref(value.value || (mode.value === 'single' ? '' : []));
      
      // 监听外部值变化
      watch(value, (newValue) => {
        selectedValue.value = newValue || (mode.value === 'single' ? '' : []);
      });
      
      // 处理选择变化
      const handleChange = (newValue) => {
        emit('change', newValue);
        selectedValue.value = newValue;
      };
      
      return {
        selectedValue,
        SHOW_CHILD: 'SHOW_CHILD',
        handleChange
      };
    }
  });
  </script>